const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {//配置
    entry: './src/main.js',//webpack入口
    output: {//出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    //自动生成html文件
    plugins: [new HtmlWebpackPlugin({//plugins插件配置
        template: './public/index.html'//告诉webpack使用插件时,以我们自己的html文件作为模板去成成dist/html文件
    })],
    module: {//加载配置器
        rules: [//规则
            {//一个具体的规则对象
                test: /\.css$/i,//匹配.css结尾的文件
                use: ["style-loader", "css-loader"],//让webpack使用这个loader处理css文件
                //从左到右,所以不能颠倒顺序
                //css-loader:webpack解析css文件-把css代码一起打包进js中
                //style-loader:css代码插到DOM上(style标签)
            },
            {//一个具体的规则对象
                test: /\.less$/i,//匹配.less结尾的文件
                use: ["style-loader", "css-loader", 'less-loader'],//让webpack使用这个loader处理css文件
                //从左到右,所以不能颠倒顺序
                //less-loader:webpack解析less文件-把less代码一起打包进js中
                //css-loader:webpack解析css文件-把css代码一起打包进js中
                //style-loader:css代码插到DOM上(style标签)
            },
            {// 图片文件的配置(仅适用于webpack5版本)
                test: /\.(gif|png|jpg|jpeg)$/i,
                type: 'asset'// 匹配上面的文件后, webpack会把他们当做静态资源处理打包
                // 如果你设置的是asset模式
                // 以8KB大小区分图片文件
                // 小于8KB的, 把图片文件转base64, 打包进js中
                // 大于8KB的, 直接把图片文件输出到dist下
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                type: 'asset/resource',// 所有的字体图标都输出到dist下
                generator: {
                    filename: 'fonts/[name].[hash:6][ext]'//[ext]会替换成.eot/.woff
                }
            },
        ],
    },

};
